<template>
    <div class="page-wrap">
        <div>
            <filter-form @change="handleSearch" />
        </div>
        <a-divider class="full-divider-h" />
        <flexbox class="margin-b-8" justify="flex-end">
            <a-button type="primary">推送路标任务</a-button>
            <a-button type="primary" :disabled="!allSelectedRows.length" class="margin-l-8" @click="handleMultiPush">批量推送路标任务</a-button>
        </flexbox>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="newList"
            :pagination="paginationConfig"
            @change="handleTableChange"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps }"
        >
            <template #catalogType="{ text }">
                {{ $filters.catalogTypeFilter(text) }}
            </template>
            <template #isAnnualPlanning="{ text }">
                {{ text === '1' ? '是' : '否' }}
            </template>
            <template #expirationDate="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #startTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #endTime="{ text }">
                {{ text ? $moment(text).format('YYYY-MM-DD') : '' }}
            </template>
            <template #isLaunchNextPhase="{ record }">
                <a-select size="small" placeholder="请选择" v-model:value="record.isLaunchNextPhase" @change="handleSelectChange($event, index)">
                    <a-select-option key="1"> 是 </a-select-option>
                    <a-select-option key="0"> 否 </a-select-option>
                </a-select>
            </template>
            <template #signpostPlanPeriod="{ text }">
                {{ $filters.signpostPlanPeriodFilter(text) }}
            </template>
            <template #status="{ text }">
                {{ $filters.lubiaoStatusFilter(text) }}
            </template>
            <template #action="{ record }">
                <a @click="handleDelete(record)" v-if="+record.status === 0">删除</a>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import { useMessage } from '@/hooks/common/useMessage';
import { message } from 'ant-design-vue';
import { deepClone } from '@/utils/util';
import api from '@/api';
import CustomTable from '@/components/Table/CutomTable.vue';
import FilterForm from './components/filterForm.vue';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableRowSelect } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { ref, reactive, toRefs, watch, defineComponent } from 'vue';
export default defineComponent({
    components: {
        FilterForm,
        CustomTable
    },
    setup() {
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('lubiaoPushList');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(
            setLoading,
            paginationConfig,
            setPaginationConfig,
            'lubiaoPushList'
        );
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { selectedRowKeys, selectedRows, allSelectedRows, onSelectChange, setSelectRows, setAllSelectedRows } = useTableRowSelect();
        const MultiSetModalRef = ref<any>();
        const state = reactive<any>({
            newList: []
        });
        const handleSelectChange = (val, index) => {
            handleSave(index);
        };
        const handleSave = async (index) => {
            if (index >= 0) {
                let query: any = deepClone(state.newList[index]);
                query = {
                    ...query,
                    isSignpostPlan: query.isSignpostPlan ? '1' : '0'
                };
                const { success } = await api.signpostManagementModel.save([query]);
                if (success) {
                    getList();
                }
            }
        };
        const handleMultiPush = () => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: '路标任务发起后不可撤销，请确认无误后再操作！',
                iconType: 'danger',
                onOk: async () => {
                    let list: any = [];
                    list = allSelectedRows.value.map((item) => ({
                        ...item,
                        status: '1'
                    }));
                    const { success, errorMsg } = await api.signpostModel.batchSave([...list]);
                    if (success) {
                        getList();
                        setSelectRows([], []);
                        message.success('操作成功');
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        const getCheckboxProps = (record) => {
            return {
                disabled: +record.status > 0,
                ...record
            };
        };
        setSearchQuery({
            selectType: 'pool'
        });
        const handleDelete = (item) => {
            const { createConfirm } = useMessage();
            createConfirm({
                title: `确认删除【${item.productLineName}】?`,
                iconType: 'danger',
                onOk: async () => {
                    const query = {
                        id: item.id
                    };
                    const { success, errorMsg } = await api.signpostModel.delete(query);
                    if (success) {
                        // 剔除掉已经选择的id
                        const index = allSelectedRows.value.findIndex((elem) => elem.id === item.id);
                        if (index) {
                            const allSelectedArr: any = deepClone(allSelectedRows.value);
                            allSelectedArr.splice(index, 1);
                            if (allSelectedArr.length) {
                                setAllSelectedRows(allSelectedArr);
                            }
                        }
                        message.success('删除成功');
                        getList();
                    } else {
                        message.error(errorMsg);
                    }
                }
            });
        };
        useMountedAndActivated(getList);
        watch(
            () => list.value,
            () => {
                state.newList = [...list.value].map((item) => ({
                    ...item,
                    id: item.id.toString()
                }));
            },
            {
                deep: true,
                immediate: true
            }
        );
        return {
            MultiSetModalRef,
            ...toRefs(state),
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch,
            handleSelectChange,
            selectedRowKeys,
            selectedRows,
            onSelectChange,
            handleMultiPush,
            allSelectedRows,
            getCheckboxProps,
            handleDelete
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px 24px;
    background: #fff;
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
    ::v-deep(.full-divider-h) {
        margin-top: 0px !important;
    }
}
</style>